<!DOCTYPE html>
<html>
<head>
    <title>资讯推荐系统</title>
    <link href="/stylesheets/bootstrap.css" rel='stylesheet' type='text/css'/>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="/javascripts/jquery.min.js"></script>
    <!-- Custom Theme files -->
    <link href="/stylesheets/style.css" rel="stylesheet" type="text/css" media="all"/>
    <!-- Custom Theme files -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="Express News Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design"/>
    <script type="application/x-javascript"> addEventListener("load", function () {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        } </script>
    <!-- for bootstrap working -->
    <script type="text/javascript" src="/javascripts/bootstrap.js"></script>
    <!-- //for bootstrap working -->
    <!-- web-fonts -->
    <link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic'
          rel='stylesheet' type='text/css'>
    <link href='//fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
    <script src="/javascripts/responsiveslides.min.js"></script>
    <script>
        $(function () {
            $("#slider").responsiveSlides({
                auto: true,
                nav: true,
                speed: 500,
                namespace: "callbacks",
                pager: true,
            });
        });
    </script>
    <script type="text/javascript" src="/javascripts/move-top.js"></script>
    <script type="text/javascript" src="/javascripts/easing.js"></script>
    <!--/script-->
    <script type="text/javascript">
        $(document).ready(function ($) {
            $(".scroll").click(function (event) {
                event.preventDefault();
                $('html,body').animate({scrollTop: $(this.hash).offset().top}, 900);
            });

        });
    </script>
    <script type="text/javascript" src="/javascripts/signup.js"></script>
    <script type="text/javascript" src="/javascripts/signin.js"></script>
    <script type="text/javascript" src="/javascripts/signout.js"></script>
</head>
<body>
<!-- header-section-starts-here -->
<% include header.ejs %>

<!-- header-section-ends-here -->

<!-- content-section-starts-here -->
<div class="main-body ">
    <div class="wrap">
        <div class="col-md-8  col-md-offset-2 content-left">
            <div class="slider">
                <div class="callbacks_wrap">
                    <ul class="rslides" id="slider">
                        <li>
                            <img src="/images/3.jpg" alt="">
                            <div class="caption">
                                <a href="/single">今天有点堵车</a>
                            </div>
                        </li>
                        <li>
                            <img src="/images/2.jpg" alt="">
                            <div class="caption"><a>震惊！树成精了</a>
                            </div>
                        </li>
                        <li>
                            <img src="/images/1.jpg" alt="">
                            <div class="caption">
                                <a href="/single">哈哈</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="articles">
                <header>
                    <h3 class="title-head">推荐</h3>
                </header>
                <% data.forEach(article => { %>
                <% if (article.tag !== 'ad'){ %>
                <div class="article">
                    <div class="article-left">
                        <a href='/single/<%= article['item_id'] %>'><img src='<%= article.imageUrl %>'></a>
                    </div>
                    <div class="article-right">
                        <div class="article-title">
                            <p>On <%= article.time %></p>
                            <a class="title" href="/single/<%= article['item_id'] %>"> <%= article.title %></a>
                        </div>
                        <div class="article-text">
                            <p><%= article.abstract %></p>
                            <a href="/single/<%= article['item_id'] %>"><img src="images/more.png" alt=""/></a>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <% } %>
                <% }) %>
            </div>
            <!--<div class="life-style">-->
            <!--<header>-->
            <!--<h3 class="title-head">Life Style</h3>-->
            <!--</header>-->
            <!--<div class="life-style-grids">-->
            <!--<div class="life-style-left-grid">-->
            <!--<a href="/single"><img src="images/l1.jpg" alt=""/></a>-->
            <!--<a class="title" href="single.ejs">It is a long established fact that a reader will be-->
            <!--distracted.</a>-->
            <!--</div>-->
            <!--<div class="life-style-right-grid">-->
            <!--<a href="/single"><img src="images/l2.jpg" alt=""/></a>-->
            <!--<a class="title" href="single.ejs">There are many variations of passages of Lorem Ipsum-->
            <!--available.</a>-->
            <!--</div>-->
            <!--<div class="clearfix"></div>-->
            <!--</div>-->
            <!--<div class="life-style-grids">-->
            <!--<div class="life-style-left-grid">-->
            <!--<a href="single.ejs"><img src="images/l3.jpg" alt=""/></a>-->
            <!--<a class="title" href="single.ejs">Contrary to popular belief, Lorem Ipsum is not simply random-->
            <!--text.</a>-->
            <!--</div>-->
            <!--<div class="life-style-right-grid">-->
            <!--<a href="single.ejs"><img src="images/l4.jpg" alt=""/></a>-->
            <!--<a class="title" href="single.ejs">Sed ut perspiciatis unde omnis iste natus error sit-->
            <!--voluptatem.</a>-->
            <!--</div>-->
            <!--<div class="clearfix"></div>-->
            <!--</div>-->
            <!--</div>-->
            <!--<div class="sports-top">-->
            <!--<div class="s-grid-left">-->
            <!--<div class="cricket">-->
            <!--<header>-->
            <!--<h3 class="title-head">Business</h3>-->
            <!--</header>-->
            <!--<div class="c-sports-main">-->
            <!--<div class="c-image">-->
            <!--<a href="single.ejs"><img src="images/bus1.jpg" alt=""/></a>-->
            <!--</div>-->
            <!--<div class="c-text">-->
            <!--<h6>Lorem Ipsum</h6>-->
            <!--<a class="power" href="single.ejs">It is a long established fact that a reader</a>-->
            <!--<p class="date">On Feb 25, 2015</p>-->
            <!--<a class="reu" href="single.ejs"><img src="images/more.png" alt=""/></a>-->
            <!--<div class="clearfix"></div>-->
            <!--</div>-->
            <!--<div class="clearfix"></div>-->
            <!--</div>-->
            <!--<div class="s-grid-small">-->
            <!--<div class="sc-image">-->
            <!--<a href="single.ejs"><img src="images/bus2.jpg" alt=""/></a>-->
            <!--</div>-->
            <!--<div class="sc-text">-->
            <!--<h6>Lorem Ipsum</h6>-->
            <!--<a class="power" href="single.ejs">It is a long established fact that a reader</a>-->
            <!--<p class="date">On Mar 21, 2015</p>-->
            <!--<a class="reu" href="single.ejs"><img src="images/more.png" alt=""/></a>-->
            <!--<div class="clearfix"></div>-->
            <!--</div>-->
            <!--<div class="clearfix"></div>-->
            <!--</div>-->
            <!--<div class="s-grid-small">-->
            <!--<div class="sc-image">-->
            <!--<a href="single.ejs"><img src="images/bus3.jpg" alt=""/></a>-->
            <!--</div>-->
            <!--<div class="sc-text">-->
            <!--<h6>Lorem Ipsum</h6>-->
            <!--<a class="power" href="single.ejs">It is a long established fact that a reader</a>-->
            <!--<p class="date">On Jan 25, 2015</p>-->
            <!--<a class="reu" href="single.ejs"><img src="images/more.png" alt=""/></a>-->
            <!--<div class="clearfix"></div>-->
            <!--</div>-->
            <!--<div class="clearfix"></div>-->
            <!--</div>-->
            <!--<div class="s-grid-small">-->
            <!--<div class="sc-image">-->
            <!--<a href="single.ejs"><img src="images/bus4.jpg" alt=""/></a>-->
            <!--</div>-->
            <!--<div class="sc-text">-->
            <!--<h6>Lorem Ipsum</h6>-->
            <!--<a class="power" href="single.ejs">It is a long established fact that a reader</a>-->
            <!--<p class="date">On Jul 19, 2015</p>-->
            <!--<a class="reu" href="single.ejs"><img src="images/more.png" alt=""/></a>-->
            <!--<div class="clearfix"></div>-->
            <!--</div>-->
            <!--<div class="clearfix"></div>-->
            <!--</div>-->
            <!--</div>-->
            <!--</div>-->
            <!--<div class="s-grid-right">-->
            <!--<div class="cricket">-->
            <!--<header>-->
            <!--<h3 class="title-popular">Technology</h3>-->
            <!--</header>-->
            <!--<div class="c-sports-main">-->
            <!--<div class="c-image">-->
            <!--<a href="single.ejs"><img src="images/tec1.jpg" alt=""/></a>-->
            <!--</div>-->
            <!--<div class="c-text">-->
            <!--<h6>Lorem Ipsum</h6>-->
            <!--<a class="power" href="single.ejs">It is a long established fact that a reader</a>-->
            <!--<p class="date">On Apr 22, 2015</p>-->
            <!--<a class="reu" href="single.ejs"><img src="images/more.png" alt=""/></a>-->
            <!--<div class="clearfix"></div>-->
            <!--</div>-->
            <!--<div class="clearfix"></div>-->
            <!--</div>-->
            <!--<div class="s-grid-small">-->
            <!--<div class="sc-image">-->
            <!--<a href="single.ejs"><img src="images/tec2.jpg" alt=""/></a>-->
            <!--</div>-->
            <!--<div class="sc-text">-->
            <!--<h6>Lorem Ipsum</h6>-->
            <!--<a class="power" href="single.ejs">It is a long established fact that a reader</a>-->
            <!--<p class="date">On Jan 19, 2015</p>-->
            <!--<a class="reu" href="single.ejs"><img src="images/more.png" alt=""/></a>-->
            <!--<div class="clearfix"></div>-->
            <!--</div>-->
            <!--<div class="clearfix"></div>-->
            <!--</div>-->
            <!--<div class="s-grid-small">-->
            <!--<div class="sc-image">-->
            <!--<a href="single.ejs"><img src="images/tec3.jpg" alt=""/></a>-->
            <!--</div>-->
            <!--<div class="sc-text">-->
            <!--<h6>Lorem Ipsum</h6>-->
            <!--<a class="power" href="single.ejs">It is a long established fact that a reader</a>-->
            <!--<p class="date">On Jun 25, 2015</p>-->
            <!--<a class="reu" href="single.ejs"><img src="images/more.png" alt=""/></a>-->
            <!--<div class="clearfix"></div>-->
            <!--</div>-->
            <!--<div class="clearfix"></div>-->
            <!--</div>-->
            <!--<div class="s-grid-small">-->
            <!--<div class="sc-image">-->
            <!--<a href="single.ejs"><img src="images/tec4.jpg" alt=""/></a>-->
            <!--</div>-->
            <!--<div class="sc-text">-->
            <!--<h6>Lorem Ipsum</h6>-->
            <!--<a class="power" href="single.ejs">It is a long established fact that a reader</a>-->
            <!--<p class="date">On Jul 19, 2015</p>-->
            <!--<a class="reu" href="single.ejs"><img src="images/more.png" alt=""/></a>-->
            <!--<div class="clearfix"></div>-->
            <!--</div>-->
            <!--<div class="clearfix"></div>-->
            <!--</div>-->
            <!--</div>-->
            <!--</div>-->
            <!--<div class="clearfix"></div>-->
            <!--</div>-->
        </div>
        <div class="clearfix"></div>
    </div>
</div>
<!-- content-section-ends-here -->
<!-- footer-section-starts-here -->
<% include footer.ejs %>
<!-- footer-section-ends-here -->
<script type="text/javascript">
    $(document).ready(function () {
        /*
        var defaults = {
        wrapID: 'toTop', // fading element id
        wrapHoverID: 'toTopHover', // fading element hover id
        scrollSpeed: 1200,
        easingType: 'linear'
        };
        */
        $().UItoTop({easingType: 'easeOutQuart'});
    });
</script>
<a href="#to-top" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
<!---->
</body>
</html>
